import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

const List<String> defaultImages = [
  'http://ww3.sinaimg.cn/large/006y8mN6ly1g6e2tdgve1j30ku0bsn75.jpg',
  'http://ww3.sinaimg.cn/large/006y8mN6ly1g6e2whp87sj30ku0bstec.jpg',
  'http://ww3.sinaimg.cn/large/006y8mN6ly1g6e2tl1v3bj30ku0bs77z.jpg',
];
// 定义图片默认高度和宽度，计算出图片的宽高比
var imageWidth = 750.0;
const imageHeight = 424.0;
var imageWHRatio = imageWidth / imageHeight;

// 图片选择组件
class CommonImagePicker extends StatefulWidget {
  final ValueChanged<List<File>>? onChanged;// 图片选择回调函数
  const CommonImagePicker({super.key, this.onChanged});

  @override
  State<CommonImagePicker> createState() => CommonImagePickerState();
}

class CommonImagePickerState extends State<CommonImagePicker> {
  // 图片文件列表
  List<File> files = [];
  _pickImage() async {
    // XFile 用于封装图片或视频文件
    final XFile? xfile = await ImagePicker().pickImage(source: ImageSource.gallery);
    if (xfile == null) return;
    print('选中的xpath: ${xfile.path}');
    setState(() {
      // 如果需要连续添加多个元素,使用级联操作符 ..对同一个对象连续调用多个方法或属性，Dart 会返回 files 自身
      files = files..add(File(xfile.path));
    });
    // 触发回调
    if(widget.onChanged != null) widget.onChanged!(files);
  }

  @override
  Widget build(BuildContext context) {
    // 计算图片容器宽度和高度
    var width = (MediaQuery.of(context).size.width - 10* 4) / 3;
    var height = width / imageWHRatio;
    // 容器圆角样式
    var containerRadius = BorderRadius.circular(8.0);
    
    // 添加按钮容器
    Widget addButton = GestureDetector(
      onTap: () {
        // 添加图片
        _pickImage();
      },
      child: Container(
        width: width,
        height: height,
        decoration: BoxDecoration(
           color: Colors.grey,
           borderRadius: containerRadius,
        ),
        child: const Center(
          child: Text('+',style: TextStyle(fontSize: 25.0,fontWeight: FontWeight.bold),),
        ),
      )
    );

    // 图像容器
    Widget imageContainer(File file){
      return Stack(
        // 不裁剪子组件，允许其绘制在父容器外
        clipBehavior: Clip.none,
        children: [
          ClipRRect(// 剪切图片
            borderRadius: containerRadius, // 使用之前定义的圆角半径
            child: Image.file(
              file,
              width: width,
              height: height,
              fit: BoxFit.cover,
            ),
          ),
          Positioned(
            right: -20.0,
            top: -20.0,
            child: IconButton(
              onPressed: (){
                setState(() {
                   files = files..remove(file);
                });
                if(widget.onChanged != null) widget.onChanged!(files);
              }, 
              icon: const Icon(
                Icons.delete_forever,
                color: Colors.red,
              ),
            )
          ),
        ],
      );
      
    }
    // 图像列表
    List<Widget> imageList = files.map((item)=> imageContainer(item)).toList();
    // 末尾添加添加按钮容器
    imageList.add(addButton);
    
    return Container(
      padding: const EdgeInsets.all(10.0),
      child: Wrap(
        spacing: 10.0,
        runSpacing: 10.0,
        children: imageList,
      ),
    );
  }
}